<template>
    <div class="page" ref="pageRef">
        <div class="page-container">
            <div class="page-title">
                <div class="left">
                    <div class="name">
                        {{ $route.meta.title }}
                    </div>
                    <SystemBreadcrumb />
                </div>
                <div class="search-box">
                    <a-input-search
                        width="460"
                        placeholder="请输入人脸集名称"
                        enter-button
                        v-model:value.trim="searchObj.key_word"
                        @search="search"
                    />
                </div>
                <a-button
                    type="primary"
                    @click="hdlOpen"
                    :icon="h(PlusOutlined)"
                    class="add"
                >
                    新建人脸集
                </a-button>
            </div>
            <div class="table-box">
                <div class="list">
                    <div class="item active" v-for="item in lazyTable.data">
                        <img :src="item.first_image[0]" alt="" />
                        <div class="zz">
                            <div class="close" @click.stop="hdlRemove(item.id)">
                                <img
                                    class="close-icon"
                                    src="@/assets/Lw/close.png"
                                    alt=""
                                />
                            </div>
                            <div class="name">{{ item.name }}</div>
                            <div class="desc">
                                <div class="name">
                                    <span>{{ item.user_name }}</span>
                                    <img
                                        class="modify"
                                        src="@/assets/Lw/modify.png"
                                        alt=""
                                        :style="{
                                            marginLeft: `${
                                                item.user_name.length + 0.3
                                            }em`,
                                        }"
                                        @click.stop="hdlModify(item.id)"
                                    />
                                </div>
                                <div class="position">{{ item.duties }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <CustomEmpty
                no-data-text="暂无创建人脸"
                operate-text="添加人脸管理"
                @change="hdlOpen"
                v-if="lazyTable.data.length == 0"
            />

            <div class="pagination-box">
                <a-pagination
                    v-bind="lazyTable.pagination"
                    show-quick-jumper
                    @change="changePageIndex"
                    :hideOnSinglePage="true"
                />
            </div>
        </div>

        <ModalUploadImg
            ref="modalUploadImgRef"
            :on-upload-success="refresh"
            :getContainer="getPopupContainer"
        />

        <a-spin
            class="page-loading"
            :class="{ active: lazyTable.loading }"
            size="large"
        />
    </div>
</template>

<script setup lang="ts">
    import { PlusOutlined } from "@ant-design/icons-vue";
    import { useLazyLable } from "@/hooks/useLazyLable";
    import { useRouter, useRoute } from "vue-router";
    import { facialSetService } from "@/service/faceLibrary.service";
    import { h, ref } from "vue";
    import ModalUploadImg from "./comps/ModalUploadImg/ModalUploadImg.vue";
    import SystemBreadcrumb from "@/components/SystemBreadcrumb/SystemBreadcrumb.vue";
    import CustomEmpty from "@/components/CustomEmpty/CustomEmpty.vue";

    const pageRef = ref();
    const router = useRouter();
    const route = useRoute();

    // const faceLibId = route.query.face_lib_id as string;

    const hdlRemove = (id: string) => {};

    const lazyTableStore = useLazyLable<typeof facialSetService>(
        router,
        route,
        facialSetService,
        {
            pageSize: 20,
        },
        "object",
        true,
        null,
    );

    const {
        lazyTable,
        searchObj,
        search,
        resetSearchObj,
        handleTableChange,
        refresh,
        remove,
        changePageIndex,
    } = lazyTableStore;

    const hdlResetSearchObj = () => {
        resetSearchObj(["face_lib_id"]);
        search();
    };

    const modalUploadImgRef = ref();

    const hdlOpen = () => {
        modalUploadImgRef.value.changeOpen();
    };

    const hdlModify = (id: string) => {
        modalUploadImgRef.value.changeOpen(id);
    };

    const columns = [
        {
            title: "名称",
            dataIndex: "user_name",
            ellipsis: true,
        },
        {
            title: "预览",
            dataIndex: "first_image",
        },
        {
            title: "创建时间",
            dataIndex: "create_time",
        },
        {
            title: "操作",
            dataIndex: "btns",
            width: "130px",
        },
    ];

    const getPopupContainer = () => {
        return pageRef.value;
    };
</script>

<style lang="scss" scoped src="./FaceLibraryEditFacialSet.scss"></style>
